<template>
  <!-- 随访周期 -->
  <el-dialog title="设置随访周期" :visible="value" width="350px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-form ref="form" :model="form" :rules="rules" @submit.native.prevent="onSubmit">
      <el-form-item label="随访周期：" prop="time">
        <el-date-picker v-model="form.time" style="width:100%;" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="主管医生：" prop="managerDoctorId">
        <doctorSearch v-model="form.managerDoctorId"></doctorSearch>
      </el-form-item>
      <el-form-item label="初次就诊时间：" prop="firstVisitTime">
        <el-date-picker v-model="form.firstVisitTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="初步诊断：" prop="firstVisitId">
        <dialogFirstVisit v-model="zdItem" @success="onAddResult" deptId="" doctorId=""></dialogFirstVisit>
        <template v-for="(item,index) in medicalResult">
          <el-tag :key="index" closable @close="onDelResult(index)" type="info" style="margin:10px 10px 0 0;">{{item.firstVist}}</el-tag>
        </template>
      </el-form-item>
      <el-button v-show="false" :loading="btnLoading" native-type="submit"></el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "patientId", "visitTypeId","visitReriod"],
  components: {
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue"),
    dialogFirstVisit: () =>
      import("@/pages/process/_jz/_com/dialogInitialGuess.vue")
  },
  data() {
    return {
      btnLoading: false,
      form: {
        id: "",
        patientId: "",
        visitTypeId: "",
        managerDoctorId: "",
        firstVisitTime: "",
        firstVisitId: "",
        startTime: "",
        endTime: "",
        //=============
        time: []
      },
      zdItem: null, //选择的诊断
      rules: {
        time: [{ required: true, message: "此项必填", trigger: "change" }]
      },
      medicalResult: [] //诊断
    };
  },
  methods: {
    onSubmit() {
      const th = this;
      let j = {};
      const add = () => {
        j.id = "";
        th.btnLoading = true;
        th.$api
          .addfollowUpVisitPeriod(j)
          .then(res => {
            if (res.executed) {
              th.$message.success("保存成功");
              th.$emit("success");
              th.onClose();
            } else {
              th.$message.error(res.message);
            }
            th.btnLoading = false;
          })
          .catch(res => {
            th.btnLoading = false;
          });
      };
      const update = () => {};
      th.$refs["form"].validate(v => {
        if (v) {
          Object.assign(j, th.form);
          //处理时间
          if (th.form.time.length > 0) {
            j.startTime = j.time[0];
            j.endTime = j.time[1];
          }
          delete j.time;
          //处理诊断
          let zd = th.medicalResult.map(d => {
            return d.id;
          });
          j.firstVisitId = JSON.stringify(zd);
          add();
        }
      });
    },
    //删除初步诊断
    onDelResult(index) {
      this.medicalResult.splice(index, 1);
    },
    //添加初步诊断
    onAddResult(obj) {
      let th = this; 
      let arr = th.medicalResult.filter(d => {
        return d.firstVist == obj.firstVist;
      });
      if (arr.length == 0) th.medicalResult.push(obj);
    },
    onOpen() {
      const th = this;
      th.form.patientId = th.patientId;
      th.form.visitTypeId = th.visitTypeId; 
    },
    onClose() {
      const th = this;
      th.medicalResult = [];
      th.zdItem = null;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  }
};
</script>